<template>
  <!-- <el-select style="width: 100%" v-model="warehouseVal" clearable filterable collapse-tags placeholder="请选择仓库" :multiple="multiple">
    <el-option v-for="item in warehouse" :key="item.value" :label="item.label" :value="item.value" />
  </el-select> -->

  <VSelect v-model="warehouseVal" placeholder="店铺" :multiple="multiple" clearable filterable collapse-tags style="width: 100%" :options="warehouse"> </VSelect>
</template>

<script setup>
import { getWarehouseOptions } from "@/api/public"

const props = defineProps({
  modelValue: { type: [String, Number, Array], default: "" },
  multiple: { type: Boolean, default: false },
})

const emit = defineEmits(["update:modelValue", "change"])

const warehouse = ref([])
const warehouseVal = ref()

onMounted(() => {
  getStorehouse()
})

watch(
  () => props.modelValue,
  (val) => {
    warehouseVal.value = val
  }
)

watch(
  () => warehouseVal.value,
  (val) => {
    emit("update:modelValue", val)
    emit("change", val)
  }
)

const getStorehouse = async () => {
  try {
    const res = await getWarehouseOptions({
      status: 1,
    })
    warehouse.value = res.data
  } catch (e) {
    console.error(e)
  }
}
</script>
